<template>
    <el-dialog title="Add Module" :visible.sync="dialogVisible">
        <div class="content">
            <div class="waterfall">
                <div
                    class="item"
                    v-for="(item,index) in EbcPageTemplateList"
                    :key="index"
                    @click="addEbcList(item)"
                >
                    <div class="title">{{item.ebcTemplateName}}</div>
                    <el-image
                        :src="item.ebcTemplateImgUrl"
                    ></el-image>
                </div>
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        </div>
    </el-dialog>
</template>
<script>
const ERR_OK = 200;
export default {
    props: {
        EbcPageTemplateList: Array
    },
    data() {
        return {
            dialogVisible: false
        };
    },
    created() {},
    methods: {
        show() {
            this.dialogVisible = true;
        },
        addEbcList(item){
            if(this.dialogVisible){
                 this.$emit('addEbcList',item)
            }
             this.dialogVisible = false 
        }
    }
};
</script>
<style lang="stylus" scoped>
.el-row {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
    -moz-column-gap: 0.5em;
    -webkit-column-gap: 0.5em;
    column-gap: 0.5em;
}

/* 瀑布流层 */
.content {
    max-height: 500px;
    overflow: auto;

    .waterfall {
        column-count: 2;
        column-gap: 15px;

        .item {
            -moz-page-break-inside: avoid;
            -webkit-column-break-inside: avoid;
            break-inside: avoid;
            border: 1px solid #cccccc;
            margin-bottom: 15px;
            cursor: pointer;

            .title {
                padding: 10px;
                font-size: 16px;
            }

            &:hover {
                .title {
                    background: #409EFF;
                    color: #ffffff;
                }
            }
        }
    }
}
</style>